<template>
	<div class="tui-conversation-list">
		<ActionsMenu v-if="isShowOverlay" :selectedConversation="currentConversation"
			:actionsMenuPosition="actionsMenuPosition" :selectedConversationDomRect="currentConversationDomRect"
			@closeConversationActionMenu="closeConversationActionMenu" />
		<div v-for="(conversation, index) in conversationList" :id="`convlistitem-${index}`" :key="index"
			:class="['TUI-conversation-content', !isPC && 'TUI-conversation-content-h5']">
			<div @click="enterConversationChat(conversation.conversationID,conversation.userProfile&&conversation.userProfile.userID)"
				@longpress="showConversationActionMenu($event, conversation, index)"
				@contextmenu.prevent="showConversationActionMenu($event, conversation, index, true)" :class="[
                    isPC && 'isPC',
                    'TUI-conversation-item',
                    currentConversationID === conversation.conversationID &&
                        'TUI-conversation-item-selected',
                    conversation.isPinned && 'TUI-conversation-item-pinned'
                ]">
				<aside class="left" style="width: 60px; height: 60px">
					<image style="height: 60px; width: 60px; border-radius: 50%" mode="aspectFill" class="avatar"
						:src="conversation.userProfile&&conversation.userProfile.avatar" />
					<div v-if="userOnlineStatusMap && isShowUserOnlineStatus(conversation)" :class="[
                            'online-status',
                            Object.keys(userOnlineStatusMap).length > 0 &&
                            Object.keys(userOnlineStatusMap).includes(
                               conversation.userProfile&& conversation.userProfile.userID
                            ) &&
                            userOnlineStatusMap[conversation.userProfile&&conversation.userProfile.userID].statusType === 1
                                ? 'online-status-online'
                                : 'online-status-offline'
                        ]"></div>
				</aside>
				<div class="content">
					<div class="content-header">
						<label class="content-header-label">
							<p class="name"
								style="width:200px;font-weight: bold;font-size:18px;padding-bottom:8px;position:relative:-5px;">
								{{ conversation.getShowName() }}
							</p>
						</label>
						<div class="middle-box">
							<span class="middle-box-at" v-if="
                                    conversation.type === 'GROUP' &&
                                    conversation.groupAtInfoList &&
                                    conversation.groupAtInfoList.length > 0
                                ">{{ conversation.getGroupAtInfo() }}</span>
							<p class="middle-box-content" style="font-size: 16px" v-if="
                                    conversation.lastMessage &&
                                    conversation.lastMessage.cloudCustomData == 'gift'
                                ">
								{{
                                    conversation.lastMessage.fromAccount == userInfo.id
                                        ? '送出'
                                        : '收到'
                                }}礼物:
								<span style="color: #fd8255">
									{{
                                        conversation.lastMessage.payload.text.includes('name')
                                            ? JSON.parse(conversation.lastMessage.payload.text).name
                                            : conversation.lastMessage.payload.name
                                    }}
								</span>
							</p>
							<p class="middle-box-content" style="font-size: 16px" v-else-if="
                                    conversation.lastMessage &&
                                    conversation.lastMessage.cloudCustomData == 'call'
                                ">
								{{
                                    conversation.lastMessage.payload.text.includes('text')
                                        ? JSON.parse(conversation.lastMessage.payload.text).text
                                        : conversation.lastMessage.payload.text
                                }}
							</p>
							<p class="middle-box-content" style="font-size: 16px" v-else-if="
                                    conversation.lastMessage &&
                                    conversation.lastMessage.cloudCustomData == 'uncall'
                                ">
								{{
                                    conversation.lastMessage.payload.text == 'none'
                                        ? '通话结束'
                                        : conversation.lastMessage.payload.text
                                }}
							</p>
							<p class="middle-box-content" style="font-size: 16px" v-else>
								{{ conversation.getLastMessage('text') }}
							</p>
						</div>
					</div>
					<div class="content-footer">
						<span class="time" style="font-size: 14px">{{
                            conversation.getLastMessage('time')
                        }}</span>
						<Icon v-if="conversation.isMuted" :file="muteIcon"></Icon>
						<span class="num" v-if="conversation.unreadCount > 0 && !conversation.isMuted">
							{{ conversation.unreadCount > 99 ? '99+' : conversation.unreadCount }}
						</span>
						<span class="num-notify" v-if="conversation.unreadCount > 0 && conversation.isMuted"></span>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
	interface IUserStatus {
		statusType : number
		customStatus : string
	}

	interface IUserStatusMap {
		[userID : string] : IUserStatus
	}
	import { ref, computed } from '../../../adapter-vue'
	import TUIChatEngine, {
		TUIGlobal,
		TUIStore,
		StoreName,
		TUIConversationService
	} from '@tencentcloud/chat-uikit-engine'
	import { IConversationModel } from '@tencentcloud/chat-uikit-engine'
	import Icon from '../../common/Icon.vue'
	import ActionsMenu from '../actions-menu/index.vue'
	import muteIcon from '../../../assets/icon/mute.svg'
	import { isUniFrameWork } from '../../../utils/is-uni'
	import store from '@/store'

	const props = defineProps({
		type: {
			type: String,
			default: '1'
		}
	})
	const userInfos = computed(() => {
		return store.state.user.userInfo
	})
	const emits = defineEmits(['handleSwitchConversation', 'getPassingRef'])
	const isH5 = TUIGlobal.getPlatform() === 'h5'
	const isPC = ref(TUIGlobal.getPlatform() === 'pc')
	const currentConversation = ref<typeof IConversationModel>()
	const currentConversationID = ref<string>()
	const currentConversationDomRect = ref<DOMRect>()
	const isShowOverlay = ref<boolean>(false)
	const conversationList = ref<(typeof IConversationModel)[]>([])
	const conversationListDomRef = ref<HTMLElement | undefined>()
	const actionsMenuPosition = ref<{ top : number; left ?: number; conversationHeight ?: number }>({
		top: 0
	})
	const displayOnlineStatus = ref(false) // 在线状态 默认关闭
	const userOnlineStatusMap = ref<IUserStatusMap>()

	let lastestOpenActionsMenuTime : number | null = null
	const isFirstInit = ref(true)
	TUIStore.watch(StoreName.CONV, {
		currentConversationID: (id : string) => {
			currentConversationID.value = id
		},
		conversationList: async (list : Array<typeof IConversationModel>) => {
			// if (list && list.length) {
			// 	console.log(new Date().getTime() / 1000 - list[0].lastMessage.lastTime)
			// }
			// // await store.dispatch('user/getChatFriend')
			// const chatFriend = store.state.user && store.state.user.chatFriend
			// const unreadCountLength = list.reduce((x, y) => x + y.unreadCount, 0)
			// list = list.filter(v => {
			// 	// try{
			// 	// 	if(v.lastMessage.cloudCustomData=='call'&&  parseInt(new Date().getTime()/1000 - v.lastMessage.lastTime)<10&&isFirstInit.value ){
			// 	// 		 TUIChatEngine.TUIChat.sendTextMessage({
			// 	// 			to: v.conversationID.replace('C2C',''),
			// 	// 			payload: {
			// 	// 				text: '未接通!'
			// 	// 			},
			// 	// 			cloudCustomData: 'uncall',
			// 	// 			conversationType: "C2C",
			// 	// 		}).catch(e => console.log(e))
			// 	// 		console.log("上线挂断对方电话")
			// 	// 	}

			// 	// }catch(e){
			// 	// 	console.log(e)
			// 	// 	console.log("上线挂断对方电话")
			// 	// }
			// 	return true
			// 	// const friend = chatFriend.find(r => r.userID == v.userProfile.userID)
			// 	// if (friend) {
			// 	// 	if (friend.friendCustomField && friend.friendCustomField.length > 0 || userInfos.value.gender == 2) {
			// 	// 		const Tag_SNS_Custom_canChat = friend.friendCustomField.find(d => d.key == 'Tag_SNS_Custom_canChat')
			// 	// 		if (Tag_SNS_Custom_canChat && Tag_SNS_Custom_canChat.value == 2 || userInfos.value.gender == 2) {
			// 	// 			return props.type == '2' ? true : false
			// 	// 		} else {
			// 	// 			return props.type == '2' ? false : true
			// 	// 		}
			// 	// 	} else {
			// 	// 		return props.type == '2' ? false : true
			// 	// 	}
			// 	// } else {
			// 	// 	return props.type == '2' ? false : true
			// 	// }
			// 	isFirstInit.value = false
			// })
			// // store.commit('user/set_data', {
			// // 	type: props.type == 1 ? 'unreadNum1' : 'unreadNum2',
			// // 	params: list.reduce((x, y) => x + y.unreadCount, 0)
			// // })
			// // store.commit('user/set_data', {
			// // 	type: props.type == 1 ? 'unreadNum2' : 'unreadNum1',
			// // 	params: unreadCountLength - list.reduce((x, y) => x + y.unreadCount, 0)
			// // })
			console.log('conversationList list', list)
			conversationList.value = list
		},
		currentConversation: (conversation : typeof IConversationModel) => {
			console.log(conversation)
			currentConversation.value = conversation
		}
	})

	// 初始状态
	TUIStore.watch(StoreName.USER, {
		displayOnlineStatus: (status : boolean) => {
			displayOnlineStatus.value = status
		},
		userStatusList: (list : Map<string, IUserStatus>) => {
			if (list.size !== 0) {
				userOnlineStatusMap.value = [...list.entries()].reduce((obj, [key, value]) => {
					obj[key] = value
					return obj
				}, {} as IUserStatusMap)
			}
		}
	})

	const isShowUserOnlineStatus = (conversation : typeof IConversationModel) : boolean => {
		return displayOnlineStatus.value && conversation.type === TUIChatEngine.TYPES.CONV_C2C
	}

	const showConversationActionMenu = (
		event : Event,
		conversation : typeof IConversationModel,
		index : number,
		isContextMenuEvent ?: boolean
	) => {
		if (isContextMenuEvent && isUniFrameWork) {
			return
		}
		currentConversation.value = conversation
		lastestOpenActionsMenuTime = Date.now()
		getActionsMenuPosition(event, index)
	}

	const closeConversationActionMenu = () => {
		// 防止连续触发overlay的tap事件
		if (lastestOpenActionsMenuTime && Date.now() - lastestOpenActionsMenuTime > 300) {
			currentConversation.value = undefined
			isShowOverlay.value = false
		}
	}

	const getActionsMenuPosition = (event : Event, index : number, conversation ?: any) => {
		if (isUniFrameWork) {
			if (typeof conversationListDomRef.value === 'undefined') {
				emits('getPassingRef', conversationListDomRef)
			}
			const query = uni.createSelectorQuery().in(conversationListDomRef.value)
			query
				.select(`#convlistitem-${index}`)
				.boundingClientRect(data => {
					if (data) {
						actionsMenuPosition.value = {
							// uni-h5的uni-page-head不被认为是视窗中的成员，因此手动上head的高度
							top: data.bottom + (isH5 ? 44 : 0),
							left: event.touches[0].pageX,
							conversationHeight: data.height
						}
						isShowOverlay.value = true
					}
				})
				.exec()
		} else {
			// 处理Vue原生
			const rect = event.currentTarget?.getBoundingClientRect()
			if (rect) {
				actionsMenuPosition.value = {
					top: rect.bottom,
					left: isPC.value ? event.clientX : undefined,
					conversationHeight: rect.height
				}
			}
			isShowOverlay.value = true
		}
	}

	const enterConversationChat = (conversationID : string, sideID : number) => {
		// emits('handleSwitchConversation', [conversationID, sideID])
		// console.log("111")
		uni.$user.chat(sideID)
		// TUIConversationService.switchConversation(conversationID)
	}

	// 暴露给父组件，当监听到滑动事件时关闭actionsMenu
	defineExpose({ closeChildren: closeConversationActionMenu })
</script>

<style lang="scss" scoped src="./style/index.scss"></style>